<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>博客管理登录</title>
    <link rel="stylesheet" type="text/css" href="../static/css/login.css" th:href="@{/css/login.css}"/>
</head>

<body>
<div class="container">
    <div class="form-box">
        <form method="post" class="text2" action="#" th:action="@{/admin/register}">
            <!--为空时错误提示   -->
            <div id="messageContainer" th:if="${message}">
                <p th:text="${message}" class="error-message"></p>
            </div>
            <!-- 注册 -->
            <div class="register-box hidden">
                <h1>register</h1>
                <input type="text" name="username" placeholder="username">
                <input type="password" name="password" placeholder="password">
                <input type="password" name="confirmPassword" placeholder="confirm password">
                <button class="button submit">create account</button>
            </div>
        </form>

        <form method="post" class="text" action="#" th:action="@{/admin/login}">
            <!-- 登录 -->
            <div class="login-box">
                <h1>login</h1>
                <input type="text" name="username" placeholder="username">
                <input type="password" name="password" placeholder="password">
                <div class="checkbox">
                    <!--跳转-->
                    <a href="/admin/catchFace" class="m-item item m-mobile-hide">
                        <i class="small face icon"></i>人脸登录
                    </a>
                </div>
                <button class="button submit">login</button>
            </div>
        </form>

    </div>
    <div class="con-box left">

        <h2 class="title"><span>Personal</span>&<br>Blog</h2>
        <p class="desc">Record your life<span> - at [blog].</span></p>
        <img class="flower smaller" src="../static/images/left.jpg" th:src="@{/images/left.jpg}" border="1px">
        <p class="account">have an account?</p>
        <button class="button" id="login">login</button>
    </div>
    <div class="con-box right">
        <h2 class="title"><span>Personal</span>&<br>Blog</h2>
        <p class="desc">Share your thoughts <span> - at [blog]</span></p>
        <img class="flower smaller" src="../static/images/right.jpg" th:src="@{/images/right.jpg}" border="1px">
        <p class="account">don't have an account?</p>
        <button class="button" id="register">sign up</button>
    </div>
</div>
<script src="../static/js/Login.js" th:src="@{/js/Login.js}"></script>
<script th:inline="javascript">
    const errorMessage = /*[[${message}]]*/ '';
</script>
</body>

</html>